﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人网站</title>
<style>
body{
    background-color: #cccccc;//这些均为颜色代码，也可以使用red等来代表
    font-family: "Microsoft Yahei","SimHei";
    margin: 0 auto;
    max-width: 900px;
    border: solid #FFFFFF;
}
header{
    background: brown;
    display: block;
    color: #FFFFFF;
    text-align: center;
}

h1{
    font-size: 72px;
    margin: 0;
}

h3{
    font-size: 18px;
    margin: 0;
    text-align: center;
    color: #F47D31;
}

nav{
    display: block;
    width:25%;
    float:left;
}
nav a:link, nav a:visited{
    display:block;
    color: #F47D31;
    border-bottom: 3px solid #FFFFFF;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    margin: 5px;
}
nav a:hover{
    color: white;
    background-color: #F47D31;
}
nav h3{
    margin: 15px;
    color: white;
}
#container{
    background-color: #888888;
}
section{
    display: block;
    width: 50%;
    float:left;
}
article{
    background: #eee;
    display: block;
    margin: 10px;
    padding: 10px;
    /*
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    */
    border-radius: 10px;
    /*-webkit-box-shadow:2px 2px 20px #888;*/
    /*-webkit-transform:rotate(-10deg);*/
    /*-moz-box-shadow:2px 2px 20px #888;*/
    /*-moz-transform:rotate(-10deg);*/
    transform:rotate(-10deg);
    box-shadow: 2px 2px 20px #888;
}
article header{
    border-radius: 10px;
    padding: 5px;
}
article footer{
    border-radius: 10px;
    padding: 5px;
}
article h1{
    font-size: 18px;
}

footer{
    clear:both;
    display: block;
    background: #F47D31;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
}
</style>
</head>

<body>
<a name="a" id="a"></a>
<header>
  <h1>个人简介</h1>
</header>
<div id="containter">
  <nav>
        <a href="首页.html">首页</a>
        <a href="菜鸟教程 - 学的不仅是技术，更是梦想！.htm">菜鸟教程</a>
    </nav>
    <section>
        <article>
            <header>
                <h1>简介</h1>
            </header>
            <ul type="square">
                <li>姓名:鲁博瑞</li>
                <li>性别:男</li>
				<li>学院班级:软件1810</li>
				<li>学号:2018005896</li>
              <li>爱好:考研上岸</li>
            </ul>
            <footer>
            <img src="damie.jpg" width="355" height="355" alt="damie" /> </footer>
        </article>
    </section>
</div>
</body>
</html>
